<template>
	<div id="tmpl">
		<div id="cate">
			<ul v-bind="{style:'width:'+ulWidth+'px'}">
				<li @click="getimages(0)">全部</li>
				<li v-for="item in cates" @click="getimages(item.id)">{{item.title}}</li>
			</ul>
		</div>

		<div id="imglist">
			<ul>
				<li v-for="item in list">
					<router-link v-bind="{to:'/photo/photoinfo/'+item.id}">
					<img v-lazy="item.img_url">
					<div id="desc">
						<h5 v-text="item.title"></h5>
						<p v-text="item.zhaiyao"></p>
					</div>
					</router-link>
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
import {Toast} from 'mint-ui';
import common from '../../kits/common.js'
	export default{
		data(){
			return{
				ulWidth:320,
				cates:[],
				list:[],
			}
		},
		created(){
			this.getcates();
			var all=0;//获取所有数据
			this.getimages(all);
		},
		methods:{
			getcates(){
				var url=common.apidomain+'/api/getimgcategory';
				this.$http.get(url).then(function(response){
					var data = response.body;
					if (data.status != 0) {
						Toast(data.message);
					}
					this.cates=data.message;
					//实现当前分类数据所在ul的总宽度 = 分类个数 * 每个分类数据的宽度
					var w = 62;
					var count = data.message.length+1;
					this.ulWidth = w*count;
				})
			},
			getimages(cateid){
				cateid = cateid || 0;
				var url=common.apidomain+'/api/getimages/'+cateid;
				this.$http.get(url).then(function(response){
					var data = response.body;
					if (data.status != 0) {
						Toast(data.message);
					}
					this.list=data.message;
				})
			}
		}
	}
</script>
<style scoped>
	#cate{
		width: 375px;
		/*height: 38px;*/
		max-width: 375px;
		overflow-x: auto;
	}
	#cate ul {
		/*width: 740px;*/
		margin: 0;!
		padding-left: 10px;		
	}
	#cate li {
		cursor: pointer;
		list-style: none;
		display: inline-block;
		color: #0094ff;
		font-size: 14px;
		padding-left: 6px;
	}

	#imglist ul{
		padding-left: 0px;
	}
	#imglist li {
		list-style: none;
		position: relative;
	}
	#imglist img {
		width: 100%;
		height: 300px;
	}
	#desc {
		width: 100%;
		background-color: rgba(0,0,0,0.2);
		position: absolute;
		bottom: 2px;
		left: 0px;
		
	}
	#desc h5 {
		font-weight: 700;
		color:#fff;
	}
	#desc p {
		color:#fff;
	}
	image[lazy=loading]{
		width: 40px;
		height: 300px;
		margin: auto;
	}
</style>